<template>
    <rect 
        :x="x" 
        :y="y" 
        :rx="rx"
        :ry="ry"
        :width="width" 
        :height="height" 
        :fill="fill" 
        :style="customStyle" >
    </rect>
</template>

<script>
export default {
    name: 'VoGridRect',
    props: {
        x: {
            type: [Number, String],
            default: 0
        },
        y: {
            type: [Number, String],
            default: 0
        },
        rx: {
            type: [Number, String],
            default: 10
        },
        ry: {
            type: [Number, String],
            default: 10
        },
        width: {
            type: [Number, String],
            default: 0
        },
        height: {
            type: [Number, String],
            default: 0
        },
        active: Boolean,
        fill: {
            type: String,
            default: '#EBEEF5'
        },
        activeFill: {
            type: String,
            default: '#E6A23C'
        },
        fillOpacity: {
            type: String,
            default: '1'
        },
        activeFillOpacity: {
            type: String,
            default: '1'
        },
        stroke: {
            type: String,
            default: '#DCDFE6'
        },
        strokeWidth: {
            type: Number,
            default: 8
        },
        activeStroke: {
            type: String,
            default: '#DCDFE6'
        },
        activeStrokeWidth: {
            type: Number,
            default: 8
        },
        strokeOpacity: {
            type: String,
            default: '1'
        },
        activeStrokeOpacity: {
            type: String,
            default: '1'
        },
        enter: Boolean,
        enterStroke: {
            type: String,
            default: '#007d65'
        },
        enterActiveStroke: {
            type: String,
            default: '#007d65'
        },
    },
    computed: {
        customStyle() {
            return {
                fill: this.active ? this.activeFill : this.fill,
                fillOpacity: this.active ? this.activeFillOpacity : this.fillOpacity,
                stroke: this.enter ? this.enterStroke : (this.active ? this.activeStroke : this.stroke),
                strokeWidth: this.enter ? this.enterActiveStroke : (this.active ? this.activeStrokeWidth : this.strokeWidth),
                strokeOpacity: this.active ? this.activeStrokeOpacity : this.strokeOpacity,
                transition: '0.2s'
            }
        }
    }
}
</script>